<template>
	<span class="icon-sprite icon-1"></span>
	<span class="icon-sprite icon-2"></span>
	<span class="icon-sprite icon-3"></span>
	<span class="icon-sprite icon-4"></span>
	<span class="icon-sprite icon-5"></span>
	<span class="icon-sprite icon-6"></span>
</template>

<style lang="less" scoped>
/* 定义精灵图背景 */
.icon-sprite {
	background-image: url('@/static/goodsTypeAll.png');
	background-repeat: no-repeat;
	display: inline-block;
	height: 80px;
	/* 精灵图中图标的高度 */
	width: 80px;
	/* 精灵图中图标的宽度 */
	margin: 0 5px;
}

/* 定义每个图标的背景位置 */
.icon-1 {
	background-position: -37px -18px;
	/* 左上角 */
}

.icon-2 {
	background-position: -185px -18px;
	/* 左起第二个图标位置 */
}

.icon-3 {
	background-position: -334px -18px;
	/* 左起第三个图标位置 */
}
.icon-4 {
	background-position: -37px -165px;
	/* 左起第四个图标位置 */
}
.icon-5 {
	background-position: -185px -165px;
	/* 左起第五个图标位置 */
}
.icon-6 {
	background-position: -334px -165px;
	/* 左起第六个图标位置 */
}
</style>